<template>
	<view class="user-info" :style="{height: wh + 'px'}">
		<view class="username-box">
			<text>姓名</text>
			<view class="input">
				<input type="text" :value="user.visitorName" @change="updateName"/>
			</view>
		</view>
		<view class="idCardType-box">
			<text>证件类型</text>
			 <uni-data-select v-model="value" :localdata="range" :clear="false" class="select"></uni-data-select>
		</view>
		<view class="idCard-box">
			<text>证件号码</text>
			<view class="input">
				<input type="text" :value="user.visitorIdCard"  @change="updateIdCard"/>
			</view>
		</view>
		<view class="phone-box">
			<text>手机号码</text>
			<view class="input">
				<input type="text" :value="user.visitorPhone" @input="updatePhone"/>
			</view>
			<!-- <view class="input">
				<input type="text" :value="user.visitorPhone" @change="updatePhone"/>
			</view> -->
		</view>
		<view class="commit-btn" :style="{width: ww + 'px'}">
			<button type="primary" class="btn" @click="commitInfo">提交</button>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		computed: {
			...mapState('m_user', ['personInfo'])
		},
		data() {
			return {
				urlType: "",
				message: "",
				user: {
					visitorName: '',
					idCardType: '0',
					visitorIdCard: '',
					visitorPhone: ''
				},
				// user: '{}',
				value: 0,
				range: [
					{ value: 0, text: "居民身份证" },
					{ value: 1, text: "护照" },
					{ value: 2, text: "港澳居民来往内地通行证" },
					{ value: 3, text: "台湾居民来往大陆通行证" }
				],
				//系统属性
				sysInfo: {},
				//手机屏幕高度
				wh: 0,
				//手机屏幕宽度
				ww: 0
			};
		},
		methods: {
			...mapMutations('m_user', ['updatePersonInfo']),
			//设置屏幕高度
			setSysInfo() {
				const sysInfo = uni.getSystemInfoSync()
				this.sysInfo = sysInfo
				this.wh = sysInfo.windowHeight 
				const ww = sysInfo.windowWidth
				this.ww = ww
				// console.log("屏幕宽度", ww)
			},
			//用户信息设置		
			setPersonInfo() {
				// console.log('个人信息：', this.personInfo)
				//从本地缓存中拿到用户个人信息
				// this.user = uni.getStorageInfoSync('personInfo') || '{}'
				//设置下拉框的value值
				if(this.personInfo !== null && this.personInfo !== '{}') {
					this.user.visitorName = this.personInfo.visitorName
					this.value = this.personInfo.idCardType
					this.user.visitorIdCard = this.personInfo.visitorIdCard
					this.user.visitorPhone = this.personInfo.visitorPhone
				}
			},
			//更新用户真实姓名
			updateName(e) {
				// console.log("输入的名字: ", e.detail.value)
				this.user.visitorName = e.detail.value
			},
			updateIdCard(e) {
				this.user.visitorIdCard = e.detail.value
			},
			updatePhone(e) {
				// console.log("电话号码：", e.detail.value)
				this.user.visitorPhone = e.detail.value
				// this.$nextTick(() => {
				// 	console.log("电话号码：", e.detail.value)
				// 	this.user.visitorPhone = e.detail.value
				// })
				// setTimeout(() => {    // 设置延迟10ms有效，App端设置0实测无效
				// 	console.log("电话号码：", e.detail.value)
				// 	this.user.visitorPhone = e.detail.value
				// }, 10)
			},
			//提交游客个人信息到本地，服务器后台
			commitInfo() {				
				
				//对用户输入真实姓名进行校验
				let nameReg = /[0-9a-zA-Z]/
				if(!this.user.visitorName) {
					uni.showToast({
						icon: 'none',
						title: '真实姓名不能为空'
					})
					return
				}else if(this.user.visitorName.match(nameReg)) {
					uni.showToast({
						icon: 'none',
						title: '真实姓名不能包含非法字符'
					})
				
					this.user.visitorName = ''
					return
				}
		
				//对用户手机号验证
				let phoneReg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if(!this.user.visitorPhone) {
					uni.showToast({
						icon: 'none',
						title: '手机号不能为空'
					})
					return
				}else if (!this.user.visitorPhone.match(phoneReg)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号'
					})
					this.user.visitorPhone = ''
					return
				}
				
				//对用户输入的证件验证
				let idCardReg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
				let HKReg = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/
				let TWReg = /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/
				let PPreg = /^([a-zA-z]|[0-9]){5,17}$/;
				if (!this.user.visitorIdCard) {
					uni.showToast({
						icon: 'none',
						title: '证件号码不能为空'
					})
					return
				}
				if(this.value === 0 && !this.user.visitorIdCard.match(idCardReg)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的身份证号码'
					})
					this.user.visitorIdCard = ''
					return
				}else if(this.value === 1 && !this.user.visitorIdCard.match(PPreg)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的护照号码'
					})
					this.user.visitorIdCard = ''
					return
				}else if(this.value === 2 && !this.user.visitorIdCard.match(HKReg)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的港澳居民来往内地通行证号码'
					})
					this.user.visitorIdCard = ''
					return
				}else if(this.value === 3 && !this.user.visitorIdCard.match(TWReg)){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的台湾居民来往内地通行证号码'
					})
					this.user.visitorIdCard = ''
					return
				}
				
				const personInfo = {
					visitorName: this.user.visitorName,
					visitorIdCardType: this.value,
					visitorIdCard: this.user.visitorIdCard,
					visitorPhone: this.user.visitorPhone
				}
				// 更新个人信息
				this.updatePersonInfo(personInfo)
				
				if(this.urlType === 'redir') {
					// console.log('返回：', this.urlType)
					uni.navigateBack()
				}
			}
		},
		onLoad(options) {
			this.setSysInfo()
			this.setPersonInfo()
			this.urlType = options.type
			// console.log("参数：", options)
		}
	}
</script>

<style lang="scss">
.user-info {
	display: flex;
	flex-direction: column;
	background-color: #F4F4F4;
	//公共输入框样式设置
	.input {
		display: flex;
		align-items: center;
		text-align: right;
	}
	.username-box {
		background-color: white;
		height: 50px;
		line-height: 50px;
		padding: 0 10px;
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		border: 1px solid #efefef;
	}
	.idCardType-box {
		background-color: white;
		height: 50px;
		line-height: 50px;
		font-size: 16px;
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #efefef;
		.select {
			width: 180px;
			text-align: center;
		}
	}
	.idCard-box {
		background-color: white;
		height: 50px;
		line-height: 50px;
		font-size: 16px;
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		border: 1px solid #efefef;
	}
	.phone-box {
		background-color: white;
		height: 50px;
		line-height: 50px;
		font-size: 16px;
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		border: 1px solid #efefef;
	}
	.commit-btn {
		display: flex;
		justify-content: center;
		margin: 20px 0;
		.btn {
			width: 80%;
			border-radius: 20px;
		}
	}
}
</style>
